<template>
	<view class="container">

		<view class="nav-bar">
			<view class="back-icon" @tap="goBack">
				<uni-icons type="left" size="20" color="#fff"></uni-icons>
			</view>
			<view class="title">我的车辆</view>
			<view class="right-icons">
				<uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
			</view>
		</view>

		<view class="content-box">
			<view class="white-box">
				<image :src="path" class="add-car-image"></image>
				<view class="form-item">
					<text class="label">车辆类型：</text>
					<picker @change="bindCarModelChange" :value="carModelIndex" :range="carModels">
						<view class="picker" style="color: #ababab;">
							{{ carModelIndex > -1 ? carModels[carModelIndex] : '请选择' }}
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">车牌号码：</text>
					<picker @change="bindCarNumberChange" :value="carNumberIndex" :range="carNumbers">
						<view class="picker" style="color: #8c8c8c;">
							{{ carNumberIndex > -1 ? carNumbers[carNumberIndex] : '请选择' }}
						</view>
					</picker>
				</view>

				<view class="form-item">
					<text class="label">车架号码：</text>
					<input type="text" placeholder="请输入您的车架号" v-model="formData.frameNumber" />
				</view>

				<view class="form-item">
					<text class="label">车主姓名：</text>
					<input type="text" placeholder="请输入您的姓名" v-model="formData.ownerName" />
				</view>

				<view class="form-item">
					<text class="label">电话号码：</text>
					<input type="number" placeholder="请输入您的手机号" v-model="formData.phone" />
				</view>

				<view class="form-item">
					<text class="label">照片：</text>
					<view class="upload-box" @tap="chooseImage">
						<image v-if="formData.image" :src="formData.image" mode="aspectFill" />

						<view v-else style="text-align: center;">
							<uni-icons type="plusempty" size="30" color="#e1e1e1"></uni-icons><br>
							上传车辆照片
						</view>
					</view>
				</view>
			</view>
			<button class="submit-btn" @tap="submitForm" size="mini">添加</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: "../../../static/addmycar.png",
				carModels: ['奔驰-GR', '宝马-X5', '奥迪-A6'],
				carNumbers: ['粤A', '粤B', '粤C'],
				carModelIndex: -1,
				carNumberIndex: -1,
				formData: {
					carModel: '',
					carNumber: '',
					frameNumber: '',
					ownerName: '',
					phone: '',
					image: ''
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateTo({
					url: "/pages/lz-MyWeiXiu/mycar/mycar"
				})
			},
			bindCarModelChange(e) {
				this.carModelIndex = e.detail.value
				this.formData.carModel = this.carModels[e.detail.value]
			},
			bindCarNumberChange(e) {
				this.carNumberIndex = e.detail.value
				this.formData.carNumber = this.carNumbers[e.detail.value]
			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.formData.image = res.tempFilePaths[0]
					}
				})
			},
			submitForm() {
				// 表单验证
				if (!this.formData.carModel) {
					uni.showToast({
						title: '请选择车辆类型',
						icon: 'none'
					})
					return
				}
				// ... 其他验证

				// 提交表单
				uni.navigateTo({
					url: '/pages/lz-MyCheLiang/addmycar/addsuccess'
				})
			}
		}
	}
</script>

<style lang="scss">
	.add-car {
		padding: 30rpx;
		background: #fff;
	}

	.nav-bar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		padding: var(--status-bar-height) 16px 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			color: #fff;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.add-car-image {
		height: 230rpx;
	}

	.form-item {
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;

		.label {
			display: block;
			font-size: 28rpx;
			color: #333;
			margin-bottom: 10rpx;
		}

		input,
		.picker {
			height: 80rpx;
			border: 1px solid #eee;
			border-radius: 8rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			width: 400rpx;
			line-height: 80rpx;
		}

		.upload-box {
			width: 200rpx;
			height: 200rpx;
			border: 1px dashed #ddd;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #999;
			font-size: 24rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.submit-btn {
		background: #1890FF;
		color: #fff;
		border-radius: 8rpx;
		width: 500rpx;
		margin-left: 120rpx;

	}
</style>